<template>
  <div class="registry">
    <div class="title">注册</div>
    <div class="form-item img">
      <img :src="user.img" class="icon iconfont icon-addpictures" alt @click="showEjectWindows" />
      <div class="ejectwindows" v-show="eject">
        <Cropper @closeEjectWindows="closeEjectWindows" @setImg="setImg($event)"></Cropper>
      </div>
      <p class="tip" ref="img">请上传头像</p>
    </div>
    <div class="form-item">
      <input type="text" placeholder="手机号" v-model="user.phone" @keyup="checkPhone" />
      <p class="tip" ref="phone">请填写正确的手机号</p>
    </div>
    <div class="form-item">
      <input type="text" placeholder="验证码" v-model="user.checkCode" />
      <span class="btn-checkcode" ref="checkcode" @click="sendCode">发送验证码</span>
      <p class="tip" ref="codevalue">请输入验证码</p>
    </div>
    <div class="form-item">
      <input type="text" placeholder="昵称" v-model="user.nickname" @input="checkNickname" />
      <p class="tip" ref="nickname">昵称不得少于两位</p>
    </div>
    <div class="form-item">
      <input type="text" placeholder="密码" v-model="user.password" @keyup="checkPassword" />
      <p class="tip" ref="password">密码长度不低于6位，必须包含小写字母和数字</p>
    </div>
    <div class="form-item sex">
      <span>性别：</span>
      <input type="radio" v-model="user.sex" value="0" />男
      <input type="radio" v-model="user.sex" value="1" />女
    </div>
    <div class="form-item submit">
      <input type="button" value="注        册" @click="registry" />
      <p class="jump">
        已有账号，去
        <a href="javascript:;" @click="jumpPage('/login')">登录</a>
      </p>
    </div>
  </div>
</template>

<script>
import Cropper from "./cropper";
import axios from "axios";
import { mapState, mapActions } from "vuex";
import router from "@/router";

export default {
  components: {
    Cropper
  },
  computed: {
    ...mapState(["ip", "port"])
  },
  data() {
    return {
      eject: false,
      user: {
        img: "",
        sex: 0
      },
      intervalId: null
    };
  },
  methods: {
    ...mapActions(["jumpPage"]),
    showEjectWindows() {
      this.eject = true;
    },
    closeEjectWindows() {
      this.eject = false;
    },
    setImg(data) {
      this.user.img = data;
    },
    checkPhone() {
      let pattern = /^1[34578]\d{9}$/;
      if (!this.user.phone || !pattern.test(this.user.phone)) {
        this.$refs.phone.style.display = "inline";
        return false;
      }
      this.$refs.phone.style.display = "none";
      return true;
    },
    checkNickname() {
      if (!this.user.nickname || this.user.nickname.length < 2) {
        this.$refs.nickname.style.display = "inline";
        return false;
      } else {
        this.$refs.nickname.style.display = "none";
        return true;
      }
    },
    checkPassword() {
      // /^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[#@*&.])[a-zA-Z\d#@*&.]*$/只包含大小写字母数字特殊字符
      let pattern1 = /^(?=.*?[a-z])(?=.*?\d)[a-z\d]*$/;
      if (
        !this.user.password ||
        this.user.password.length < 6 ||
        !pattern1.test(this.user.password)
      ) {
        this.$refs.password.style.display = "inline";
        return false;
      } else {
        this.$refs.password.style.display = "none";
        return true;
      }
    },
    checkImg() {
      if (!this.user.img || this.user.img == "") {
        this.$refs.img.style.display = "inline";
        return false;
      } else {
        this.$refs.img.style.display = "none";
        return true;
      }
    },
    checkCode() {
      if (!this.user.checkCode || this.user.checkCode == "") {
        this.$refs.codevalue.style.display = "inline";
        return false;
      }
      this.$refs.codevalue.style.display = "none";
      return true;
    },
    // 发送验证码
    sendCode() {
      if (this.intervalId != null) {
        return;
      }
      if (this.checkPhone()) {
        axios
          .get(
            `http://${this.ip}:${this.port}/consumer/sendCheckCode/${this.user.phone}`
          )
          .then(res => {
            if (res.data.code == 200) {
              this.$refs.codeValue.value = res.data.data;
            }
          });

        let time = 60;
        this.intervalId = setInterval(() => {
          this.$refs.checkcode.innerHTML = `${time}S`;
          time = time - 1;
          if (time < 0) {
            clearInterval(this.intervalId);
            this.intervalId = null;
            this.$refs.checkcode.innerHTML = "重新发送";
          }
        }, 1000);
      }
    },
    registry() {
      if (
        this.checkImg() &
        this.checkPhone() &
        this.checkCode() &
        this.checkNickname() &
        this.checkPassword()
      ) {
        axios
          .post(`http://${this.ip}:${this.port}/consumer/registry1`, this.user)
          .then(res => {
            let result = res.data;
            if (result.code == 200) {
              router.push({ path: "/login" });
            }
            // 验证码错误
            if (result.message.includes("code")) {
              this.$refs.codevalue.style.display = "inline";
              this.$refs.codevalue.innerHTML = "验证码错误";
            }
            // 手机号重复
            if (result.message.includes("code")) {
              alert("用户已存在");
            }
          });
      }
    }
  }
};
</script>

<style scoped>
.registry {
  position: absolute;
  width: 430px;
  /* height: 580px; */
  top: 50%;
  left: 50%;
  margin: -320px 0 0 -215px;
  border: 1px solid #fff;
  border-radius: 20px;
}

.title {
  width: 100%;
  font-size: 35px;
  text-align: center;
  color: #fff;
  margin: 25px 0;
}

.form-item {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}

.img {
  text-align: center;
}

.icon-addpictures {
  width: 70px;
  height: 70px;
  font-size: 70px;
  border-radius: 10px;
  cursor: pointer;
}

.ejectwindows {
  position: absolute;
  top: -95px;
  left: -36px;
  width: 431px;
  height: 594px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 100px 20px 0 20px;
  /* background-color: #fff; */
  z-index: 1;
}

.img .tip {
  top: 78px;
  left: 145px;
}

input::-webkit-input-placeholder {
  color: #fff;
}

input::-moz-input-placeholder {
  color: #fff;
}

input::-ms-input-placeholder {
  color: #fff;
}

.form-item input {
  width: 333px;
  height: 48px;
  padding-left: 25px;
  border: 1px solid #fff;
  border-radius: 25px;
  font-size: 18px;
  color: #fff;
  background-color: transparent;
  /* cursor: pointer; */
  outline: none;
}

.btn-checkcode {
  position: absolute;
  right: 25px;
  top: 16px;
  color: #2a3662;
  cursor: pointer;
}

.submit {
  padding-bottom: 40px;
}

.submit input {
  width: 360px;
  padding: 0;
  background-color: #148714;
}

.form-item p {
  position: absolute;
  top: 60px;
  left: 25px;
  color: #8f3a3e;
  display: none;
  font-size: 14px;
}

.form-item .jump {
  display: block;
  color: #fff;
  top: 62px;
  left: 118px;
}

.form-item .jump a {
  color: #2a3662;
}

.sex {
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  padding-left: 50px;
  padding-bottom: 10px;
  margin-top: -15px;
}

.sex span {
  font-size: 18px;
  color: #fff;
}

.sex input {
  width: 30px;
  height: 15px;
  margin-left: 35px;
}

.sex p {
  top: 26px;
  left: 50px;
}
</style>